import React from 'react'
// ===================================================================== antd
import { Tabs, Pane } from '@antd/tabs'
// ===================================================================== Declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const BtnGroup = $Lazy.load(()=>import('#tp/btn-group'))
// ===================================================================== component
const Index = ({ children, data, onTabs, defaultActiveKey, controls, activeKey, small }) => {
	const onChange = React.useCallback( index =>{
		const _data = data[index]
		onTabs && onTabs(_data, index)
		return null
	},[ data, onTabs])
	return (
		<div className={`only-tabs bcf ${small?'small':''}`} style={{borderRadius:'5px 5px 0 0'}}>
			<Tabs 
				onChange			= { onChange } 
				defaultActiveKey	= { defaultActiveKey ? String(defaultActiveKey) : null }
				suffix				= {  <BtnGroup controls={controls} />}
				style				= {{color:'red'}}
			>
				{
					$fn.hasArray(data) && data.map((v,i)=> !v.hide && <Pane tab={v.title} key={i}></Pane> )
				}
			</Tabs>
		</div>
	)
}

export default Index